<template>
  <div class="bigBox">
    <div class="top">
      <van-nav-bar
        title="购物车"
        right-text="删除"
        @click-right="deleteShopCart"
      />
    </div>
    <div class="center" v-for="(item,index) in number" :key="index">
      <van-checkbox
        v-model="item.flag"
        checked-color="#ee0a24"
        @click="addPrice"
      ></van-checkbox>
      <div class="goods">
        <img v-lazy="item.imgUrl[0].imgUrl" />
        <div>
          <p>{{ item.goodsName }}</p>
          <p>￥{{ item.presentPrice }}</p>
        </div>
      </div>
      <van-stepper @change="addPrice" v-model="item.goodsNumber" />
    </div>
    <van-submit-bar
      :price="price"
      button-text="提交订单"
      @submit="onSubmit"
      class="bottom"
    >
      <van-checkbox v-model="checked" @click="fn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      value: "",
      number: [],
      price: 0,
      ids: [],
      res: [
        {
          imgUrl: [
            {
              imgUrl: require("../../assets/401_images/401.gif") ,
            },
          ],
          goodsName: "齐天大圣",
          presentPrice: "50",
          goodsNumber: 2,
          shopPingCartId: 1,
        },
      ],
    };
  },
  mounted() {
    this.getShoppingCart();
  },
  methods: {
    onSubmit() {
      this.number.forEach((item) => {
        if (item.flag == true) {
          //拿到选中的
          this.ids.push(item.shopPingCartId);
        }
      });
    },
    deleteShopCart() {
      let ids = [];
      this.number.forEach((item) => {
        //循环获取选中的id
        //用来发给后端
        if (item.flag) {
          ids.push(item.shopPingCartId);
          item.flag=false
        }
      });
      this.checked = false;
    },
    getShoppingCart() {
      //添加一个flag属性为多选框是否选中
      this.res.forEach((item) => {
        item.flag = false;
      });
      //赋值给数组（number为页面渲染数据）
      this.number = this.res;
    },
    addPrice() {
      //每次触发这个方法让所有数据都等于空值 重新计算拿到所有选中的数据（数组中含有true的数据）
      //这样可以保证前端取消时候不必再次使用减法增加代码量（只拿flag为true的数据计算总钱数）
      var addStr = [];
      this.ids = [];
      let a = 0;
      for (let i in this.number) {
        //循环数据列表
        if (this.number[i].flag) {
          //拿到选中的
          addStr.push(
            //presentPrice 钱     
            //goodsNumber  数量
            this.number[i]["presentPrice"] * this.number[i]["goodsNumber"]
          );
          a++;
        }
      }
      if (a == this.number.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      if (eval(addStr.join("+"))) { //eval 方法 可以处理 ‘12+12’字符串 求和 减法 乘法  除法
        this.price = eval(addStr.join("+")) * 100;
      } else {
        this.price = 0;
      }
    },
    fn() {
      this.number.forEach((item) => {
        if (this.checked) {
          //判断是否为真 如果为真 所有复选框都为true
          item.flag = true;
          this.price = 0;
          this.number.forEach((item) => {
            this.price += item.presentPrice * item.goodsNumber;
          });
          this.price = this.price * 100;
        } else {
          this.checked = false;
          //循环把复选框变为false
          this.number.forEach((item) => {
            item.flag = false;
          });
          this.price = 0;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.center {
  margin-top: 14px;
  display: flex;
  padding-left: 14px;
  align-items: center;
  .goods {
    display: flex;
    margin-left: 20px;
    width: 200px;
    img {
      width: 40%;
      height: 70px;
    }
  }
  .goods > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
    margin-right: 20px;
    width: 140px;
    p:nth-child(1) {
      font-size: 14px;
    }
    p:nth-child(2) {
      color: red;
    }
  }
}
.bottom {
  bottom: 50px;
}
</style>